//创建“外壳”组件App
import React,{Component} from 'react'
import './App.css'
import Footer from './components/Footer'
import Header from './components/Header'
import List from './components/List'

//创建并暴露App组件
export default class App extends Component{
	// 状态在哪里，操作状态的方法就在那里
	// 初始化状态
	state = {
		todos: [
			{ id: '001', name: '吃饭', done: true },
			{ id: '002', name: '睡觉', done: true },
			{ id: '003', name: '学习', done: false },
		]
	}
	// 用于添加一个todo，接收的参数是一个对象
	addTodo = (obj) => {
		const {todos} = this.state
		const newTodos = [obj,...todos]
		this.setState({
			todos: newTodos
		})
	}
	// 更新todos
	updateTodo = (id, done) => {
		const {todos} = this.state
		// 匹配处理数据
		const newTodos = todos.map((todoObj) => {
			if(todoObj.id === id) {
				return {...todoObj, done}
			}else{
				return todoObj
			}
		})
		this.setState({
			todos: newTodos
		})
	}
	// 删除todos
	deleteTodo = (id) => {
		const {todos} = this.state
		const newTodos = todos.filter(todoObj => todoObj.id !== id)
		this.setState({
			todos: newTodos
		})
	}
	// 全选/全不选
	checkAllTodos = (done) => {
		const {todos} = this.state
		// 匹配处理数据
		const newTodos = todos.map((todoObj) => {
			return {...todoObj,done}
		})
		this.setState({
			todos: newTodos
		})
	}
	// 清除已完成事件
	clearAllDone = () => {
		const {todos} = this.state
		const newTodos = todos.filter(todoObj => !todoObj.done)
		this.setState({
			todos: newTodos
		})
	}
	render(){
		let { todos } = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer todos={todos} checkAllTodos={this.checkAllTodos} clearAllDone={this.clearAllDone} />
				</div>
			</div>
		)
	}
}
